<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
	 xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
	 xmlns:mf="http://typo3.org/ns/MiniFranske/FsMediaGallery/ViewHelpers">

	<!--
	 Displays a media asset
	 Theme: Bootstrap3
	-->

	<f:section name="Detail">
		<style>
			.c-overlay-wrapper{display: none;}
			@media(min-width: 1200px){
				.c-overlay-wrapper{display: inline-block;}
				.img:hover {cursor: pointer; }
				.img:hover .c-overlay-wrapper {top: 0;opacity: 1;filter: alphaopacity=100; }
				.img:hover .c-overlay-wrapper.c-overlay-padding {top: 10px; }
				.c-overlay-wrapper{opacity: 0;filter: alphaopacity=0;position: absolute;top: 0%;left: 15px;width: 250px;height: 188px;z-index: 3;transition: all 0.2s;background: rgba(0, 0, 0, 0.4)}
				.c-overlay-wrapper a{width: 250px;height: 188px;}
				.c-overlay-content{text-align: center;display: inline-block;vertical-align: middle;padding: 0;height: auto;width: 100%;margin-top: 75px}
				.c-btn-uppercase.btn-md{padding: 10px;}
			}
		</style>
		<f:if condition="{mediaAsset}">
			<f:then>
			<!-- 首页相册展示 3-->
				<div class="img">
					<f:image
						image="{mediaAsset}"
						alt="{alt}"
						title="{f:if(condition:title, then:title, else:'{mf:fileTitle(file:mediaAsset)}')}"
						height="{width*9/16}{resizeMode}"
						width="{width}{resizeMode}"
						class="img-responsive w-100"
						/>
				</div>
			</f:then>
			<f:else>
				<div>
				<f:image
					src="{settings.list.dummyImage}"
					alt=""
					height="{height}{resizeMode}"
					width="{width}{resizeMode}"
					class="img-responsive img-dummy w-100"
					/>
				</div>
			</f:else>
		</f:if>
	</f:section>

</div>